<template>
  <div class="admin-pro-list">
    <div class="admin-pro-list-nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/admin/index/home' }"
          ><i class="el-icon-s-home"> 首页</i></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><a href="/admin/index/prolist"
            ><i class="el-icon-s-operation">产品类表</i></a
          ></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="admin-pro-list-select">
      <span>产品名称</span>
      <input v-model="proname" type="text" placeholder="请输入产品名称" />

      <el-button>查询</el-button>
    </div>

    <div class="admin-pro-list-add">
      <router-link to="/admin/index/prolist/addpro"
        ><el-button type="warning">添加商品</el-button></router-link
      >
      <el-button class="del" type="danger">批量删除</el-button>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="50"
      >
      </el-pagination>
    </div>
    <div class="admin-pro-list-pro">
      <table>
        <thead>
          <tr>
            <th>
              <!-- :checked="all"
                :change="checkAll" -->
              <input type="checkbox" />产品编号
            </th>
            <th>产品名称</th>
            <th>产品价格</th>
            <th>产品状态</th>
            <th>产品操作</th>
          </tr>
        </thead>

        <tbody v-if="tableData">
          <tr v-for="item in tableData" :key="item.sid">
            <td>
              <input type="checkbox" v-model="item.checked" name="" id="" />{{
                item.sid
              }}
            </td>
            <td>{{ item.sname }}</td>
            <td>{{ item.sprice }}</td>
            <td>{{ item.sstate }}</td>
            <td>
              <el-button type="primary">编辑</el-button>
              <el-button type="danger">删除</el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    let url = `http://localhost:3000/v1/supply/findAll`;
    this.axios.get(url).then((res) => {
      console.log(res);
      this.tableData = res.data.data;
    });
  },
  data() {
    return {
      time: "",
      proname: "",
      currentPage: 1,
      tableData: [],
    };
  },
  methods: {
    checkAll(e) {
      //console.log(e.target.checked);
      this.items.forEach((value) => (value.checked = e.target.checked));
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  computed: {
    all() {
      //每一个every，checked都是真的
      //return this.items.every(value=>value.checked)
      //every:自动遍历数组，通过箭头函数进行处理。如果每个元素处理后返回的值都是真，则返回真
      return this.items.every((value) => {
        return value.checked == true; //勾选状态是true 则返回true
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.admin-pro-list {
  .admin-pro-list-select {
    display: flex;
    line-height: 40px;
    margin: 20px 0;
    span {
      margin-right: 10px;
    }
    input {
      padding: 10px;
      border: 1px solid #333;
      margin-right: 10px;
    }
  }
  .admin-pro-list-add {
    width: 98%;
    border: 1px solid rgba(182, 181, 182, 0.4);
    padding: 10px;
    a {
      margin-right: 10px;
    }
  }
  .admin-pro-list-pro {
    margin-top: 10px;
    width: 99%;
    // border: 1px solid rgba(182, 181, 182, 0.4);
    table {
      width: 100%;
      text-align: center;
      border-collapse: collapse;
      tr {
        display: flex;
      }
      th {
        padding: 10px 0;
        width: 23%;
        border: 1px solid gray;
      }
      td {
        padding: 4px 0;
        width: 23%;
        border: 1px solid gray;
        line-height: 32px;
        button {
          line-height: 6px;
        }
      }
    }
  }
  .block {
    float: right;
  }
}
</style>
